<template>
	<div class="containerClass">
		<image :src="imgUrl" class="imageClass" mode=""></image>
		<uni-card class="cardClass" margin="0" spacing="0">
			<template v-slot:title>
				<view class="titleClass">下班打卡提醒</view>
			</template>
			<template v-slot:default>
				<text class="textClass">快到下班时间了，别忘了打卡哦～</text>
				<button class="buttonClass1" type="primary" @click="handleClick">去打卡</button>
			</template>
		</uni-card>
	</div>
</template>

<script setup>
	import imgUrl from '@/static/images/home/weizhi.png'

	// import { onLoad } from '@dcloudio/uni-app'
	//
	// onLoad(() => {})
  const handleClick = () => {
    uni.navigateTo({
      url: '/pages/attendance/attendancePage'
    })
  }
</script>

<style lang="scss" scoped>
@import '@/static/style/index.scss';


.containerClass {
		display: flex;
		margin-left: 32rpx;
		margin-right: 74rpx;
	}

	.imageClass {
		width: 60rpx;
		height: 60rpx;
		margin-right: 8rpx;
	}

	.cardClass {
		width: 576rpx;
		border-radius: 16rpx;
		border: 2rpx solid var(---success-3, $warning-card-border);
		font-weight: 500;

		.titleClass {
			width: 100%;
			height: 92rpx;
			background-color: $warning-card-bg;
			color: $warning-card-text-color;
			font-size: 32rpx;
      padding: 24rpx 0 24rpx 32rpx;
			font-style: normal;
			font-family: 'PingFang SC';
      font-weight: 500;
		}

		.textClass {
			padding: 16rpx;
			margin-top: 8rpx;
			font-weight: 400;
			font-size: 26rpx;
		}

		.buttonClass1 {
			margin-top: 16rpx;
			display: flex;
			padding: 12rpx 32rpx;
			justify-content: center;
			align-items: center;
			gap: 8rpx;
			align-self: stretch;
			border-radius: 4rpx;
			border: 2rpx solid var(---primary-6, #165dff);
			height: 64rpx;
			width: 512rpx;
			font-size: 28rpx;
      background-color: #165dff;
		}

		.buttonClass2 {
			margin-top: 16rpx;
			display: flex;
			padding: 12rpx 32rpx;
			justify-content: center;
			align-items: center;
			gap: 8rpx;
			align-self: stretch;
			border-radius: 4rpx;
			border: 2rpx solid var(---line-1, #e5e6eb);
			height: 64rpx;
			width: 512rpx;
			font-size: 28rpx;
		}
	}
</style>